<template>
  <div class="container">
    <el-carousel>
      <el-carousel-item v-for="item of banner" :key="item._id">
        <nuxt-link :to="{name:'goods-id',params:{id:item._id},query:{collectionName:'banner'}}">
          <img :src="item.banner" class="img">
          <div class="title_bg">
            <h3 class="title">{{item.title}}</h3>
            <h4 class="sub_title">{{item.sub_title}}</h4>
          </div>
        </nuxt-link>
      </el-carousel-item>
    </el-carousel>
    <el-row class="home" :gutter="20">
      <el-col :span="6" v-for="item of home" :key="item._id">
        <el-card :body-style="{padding:'0px'}" style="margin-bottom:20px">
          <nuxt-link :to="{name:'goods-id',params:{id:item._id},query:{collectionName:'home'}}">
            <img :src="item.detail.auth_icon" alt="" class="image">
          </nuxt-link>
          <div style="padding:14px;">
            <span>{{item.title}}</span>
            <div class="bottom clearfix">
              <time class="time">{{item.time}}</time>
              <el-button class="button" type="warning" icon="el-icon-star-off" circle></el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <h4>vuex操作</h4>
    <button @click="getStore">编程式操作</button>
    <div>inddex getters:{{getNav}}</div>
    <div>inddex state:{{bNav}}</div>
    <div>user state: {{data}}</div>
    <h4>内部资源指向</h4>
    <!-- 相对路径找到一些需要压缩的资源 assets -->
    <!-- <img src="../assets/img/btns.png" alt=""> -->
    <img src="~assets/img/btns.png" alt="">
    <!-- 绝对路径找到无需压缩的资源static -->
    <img src="/img/bg.jpg" alt="">
    <div class="bgimg">css指向需要压缩的资源</div>
    <h4>外部资源</h4>
    <el-button onclick="alert($)">测试外部js脚本</el-button>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { State, Getter, Action, Mutation } from "vuex-class";
@Component({
  async asyncData({ app: { $axios } }) {
    let res = await $axios({ url: "/data/list.json" });
    // console.log('读取到的静态资源',res.data)

    //读取跨域数据
    try {
      let res2 = await $axios({
        url: "/api/goods/banner",
        params: { _limit: 3 }
      });
      // console.log('读取到的跨域资源',res2.data)

      return {
        // title:res.data.title,
        banner: res2.data.data
      };
    } catch (e) {}
  },

  async fetch({ app: { $axios }, store, error }) {
    let res2 = await $axios({ url: "/api/goods/home", params: { _limit: 20 } });
    // console.log('res',res.data.title)
    res2.data &&
      store.commit("home/M_UPDATE_HOME", { err: 0, data: res2.data.data });
  }
})
export default class Index extends Vue {
  @State
  bNav: boolean | undefined; //装饰一个实例属性bNav引用到state.bNav

  @State(state => state.home.data)
  home?: object[];

  @State("user")
  data!: object; //外部state.user 做 组件内的data使用

  @Getter
  getNav!: string; //抓取getters的key，作为组件实例属性使用

  //...mapActions('user',['A_UPDATE_USER']),
  @Action("user/A_UPDATE_USER")
  A_UPDATE_USER!: (payload: object) => void;

  //...mapMutations('user',['M_UPDATE_USER']),
  @Mutation("user/M_UPDATE_USER")
  M_UPDATE_USER!: (payload: object) => void;

  getStore() {
    //编程式访问vuex
    //发出actions请求给user模块
    // this.$store.dispatch('user/A_UPDATE_USER',{err:0,msg:'登录成功',token:'假token',data:{title:"user模块的actions提交过来的数据"}})
    // this.A_UPDATE_USER({err:0,msg:'登录成功',token:'假token',data:{title:"123"}})
    //发出mutations请求给user模块
    // this.$store.commit('user/M_UPDATE_USER',{err:0,msg:'登录成功',token:'假token',data:{title:"组件携带过去的数据"}})
    this.M_UPDATE_USER({err:0,msg:'登录成功',token:'假token',data:{title:"456"}})
  }

  //计算属性定义
  get xx(): string {
    return this.bNav ? "真" : "假";
  }
}
</script>

<style scoped>
.el-carousel__item .img {
  width: 100%;
  height: auto;
}

.el-carousel__item .title_bg {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  height: 60px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0px;
  z-index: 999;
}
.home {
  margin-top: 20px;
}
.time {
  font-size: 13px;
  color: #999;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.image {
  width: 100%;
  display: block;
}
.button {
  padding: 0;
  float: right;
}
.bgimg {
  height: 50px;
  /* background: url('../assets/img/takeSbmComment.png') no-repeat */
  background: url("~assets/img/takeSbmComment.png") no-repeat;
}
</style>
